<template>
  <div class="fileOperate" id="fileOperate">
    <div class="topBox">
      <div class="topBox--flex" style="margin-bottom: 10px;">
        <img src="@/assets/icon/folder.png" class="topimg" alt="" />
        <div class="topIntro">
          <p class="title">
          <p class="title_text">{{ currentFolderName }}</p>
          </p>
          <p class="path">{{ currentPath }}</p>
        </div>
      </div>
      <div class="topBox-absolute">
        <GoodSwitch v-model="like" @favourite="collect" @cancel-favourite="cancelCollect" v-if="route.path !== '/search'">
        </GoodSwitch>
      </div>

    </div>
    <searchBox></searchBox>
    <File></File>
  </div>
</template>


<script lang="ts">
export default {
  name: "file",
};
</script>

<script setup lang="ts">
import GoodSwitch from "@/components/good_switch.vue";
import { ref } from "vue";
import { useRoute } from "vue-router";
import { usePathStore } from "../store/index";
import searchBox from "@/components/searchBox.vue";
import File from "@/components/file.vue";
import { storeToRefs } from "pinia"
import { getCollect, addCollect, deleteCollect } from "../api/collect"
// @ts-ignore
import { ElMessageBox, ElMessage } from "element-plus";
const pathStore = usePathStore();
const { currentFolderName, currentPath } = storeToRefs(pathStore)


const route = useRoute();


let id = Number(route.params.id);

const like = ref(false)
const collectId = ref(0)



/**
 * @description: 收藏
 * @return {*}
 * @author: tao wenbo 2419421809@qq.com
 */
async function collect() {
  collectId.value = (await addCollect(id)).data.id
}

/**
 * @description: 取消收藏
 * @return {*}
 * @author: tao wenbo 2419421809@qq.com
 */
async function cancelCollect() {
  await deleteCollect(collectId.value)
  ElMessage({
    type: "success",
    message: "取消收藏"
  })
}




/**
 * @description: 获取当前文件夹是否收藏过
 * @return {*}
 * @author: tao wenbo 2419421809@qq.com
 */
if (route.path !== '/search') {
  getCollect(id).then(res => {
    like.value = res.data.length > 0
    if (like.value) {
      collectId.value = res.data[0].Collect.id
    }
  })
}




switch (route.name) {
  case 'file':
    pathStore.getDirById(id);
    break;
  case 'search':
    pathStore.searchBySerText(route.query.searchText as string || '')
    break;
}










</script>



<style scoped lang="scss">
$gray: #fff;
$orange: #fff;
$fontCol: #03081a;

.fileOperate {
  min-width: 300px;

  // width: 300px;

}

.topBox {
  // background-color: $gray;
  padding: 30px 30px 50px 30px;
  box-sizing: border-box;
  position: relative;
  filter: blur(1);
  background-color: rgba($color: #000000, $alpha: .07);
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  overflow: hidden;
  &--flex {
    display: flex;
  }

  &-absolute{
    position: absolute;
    bottom: -30px;
    right: 10px;
  }



  .topimg {
    width: 80px;
    height: 80px;
    margin: 0 40px 0 0;
  }

  .topIntro {
    flex: 1;

    .title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 20px 0 0;

      .title_text {
        font-size: 25px;
        color: $fontCol;
        margin: 0 20px 0 0;
        word-break: break-al;
      }
    }

    .path {
      color: $fontCol;
      margin: 15px 0 0 0;
      word-break: break-all;
      white-space: pre-wrap;
      word-wrap: break-word;
    }
  }
}
</style>
